<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <!-- <el-form-item label="处理状态">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
            <el-option v-for="item in Object.values(STATUS_LIST_OBJECT)" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="反馈类型" prop="name">
          <el-select v-model="queryParams.type" placeholder="请选择" clearable style="width: 240px">
            <el-option :label="item.name" :value="item.id" v-for="item in typeList" :key="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" @click="initList">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <base-page-table :table-data="tableData" :table-columns-data="tableColumnsData" :loading="loading"
        :page-num="queryParams.pageNum" :page-size="queryParams.pageSize" :total="queryParams.total"
        @handleQuery="handleQuery">
        <template #index="scope">
          {{ scope.index + 1 }}
        </template>
        <template #type="{ row }">
          {{ typeJson[row.type] }}
        </template>
        <template #files="scope">
          <div class="img-div">
            <el-image style="width: 40px; height: 60px" :src="scope.row.img" :preview-teleported="true"
              :preview-src-list="scope.row.imgList" v-if="scope.row.img" />
            <!-- <MultiImageUpload v-model="scope.row.files" :limit="scope.row.files.length" :showTip="false" /> -->
          </div>
        </template>
        <template #action="scope">
          <el-button link type="primary" @click="openReport(scope.row)">处理</el-button>
          <el-button link type="primary" @click="toDetail(scope.row)">查看内容</el-button>
        </template>
      </base-page-table>
    </div>
  </div>
</template>

<script setup>
import { KEY_STATUS_OBJECT, } from "../cmsFeedback/until/enum";
import FeedbackAPI from "@/api/feedback";

const queryParams = ref({
  status: 0,
  pageNum: 1,
  pageSize: 10,
  total: 0,
  type: undefined
})
const tableData = ref([])
const loading = ref(false)
const typeList = ref([
  {
    id: 1,
    name: '建议',
  },
  {
    id: 2,
    name: 'bug',
  },
  {
    id: 3,
    name: '其他',
  }
])
const typeJson = ref({
  1: '建议',
  2: 'bug',
  3: '其他'
})
const tableColumnsData = ref([
  {
    width: 60,
    label: "序号",
    prop: "index",
    align: "center",
    customSlot: "index",
    showOverflowTooltip: true,
  },
  {
    label: "反馈类型",
    prop: "type",
    align: "center",
    customSlot: "type",
    showOverflowTooltip: true,
  },
  {
    label: "反馈内容",
    prop: "content",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "反馈图片",
    prop: "files",
    align: "center",
    showOverflowTooltip: true,
    customSlot: "files",
  },
  {
    label: "联系电话",
    prop: "mobile",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "反馈时间",
    prop: "createTime",
    align: "center",
    showOverflowTooltip: true,
  },
])

function initList() {
  queryParams.value.pageNum = 1;
  funcGetList();
}

function handleQuery(val) {
  queryParams.value.pageNum = val.pageNum;
  queryParams.value.pageSize = val.pageSize;
  queryParams.value.type = ''

  funcGetList();
}
function handleImageUrl(files) {
  try {
    return JSON.parse(files)[0].url;
  } catch (err) {
    return "";
  }
}

const funcGetList = async () => {
  try {
    loading.value = true;
    // if (queryParams.status !== undefined) {
    //   params.status = queryParams.status;
    // }
    const res = await FeedbackAPI.getFeedbackList(queryParams.value);
    for (let i = 0; i < res.data.length; i++) {
      if (res.data[i].files.length > 0) {
        res.data[i].img = res.data[i].files[0].url
        res.data[i].imgList = res.data[i].files.map(item => item.url)
      } else {
        res.data[i].img = ''
        res.data[i].imgList = []
      }
    }
    tableData.value = res.data;
    console.log(tableData.value);

    queryParams.value.total = res.total;
    // 刷新列表
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  funcGetList()
})
</script>
<style lang="scss">
.img-div {
  max-width: 260px;
  overflow-x: scroll;
  display: inline;
}
</style>
